<!-- 借鉴artiely的4级联动做了一点改动
    原文地址： http://www.cnblogs.com/coolslider/p/7076390.html -->
<template>
    <div>
        <mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5" ></mt-picker >
        <mt-picker :slots="streetSlots" ref="picker" class="picker" @change="onStreetChange" :visible-item-count="5" ></mt-picker >
        上门服务地址:{{ addressProvince }} {{ addressCity }} {{addressXian}} {{addressStreet}}
    </div>
</template>
<script>
    // import s from '../../statics/mobile/json/address4.json'
    // 中国行政区划数据：省份、城市、区县、乡镇，省市区镇三级四级联动。
    // https://github.com/artiely/Administrative-divisions-of-China
    const s = {
        '北京': {
            '市辖区': {
                '朝阳区': ['11', '22', '33']
            }
        },
        '广东': {
            '广州': {
                '朝阳区': ['44', '2552', '6633']
            },
            '深圳': {
                '朝阳区2': ['77', '88', '99'],
                '朝阳区3': ['55', '22', '33']
            }
        }
    }
    export default {
        name: 'address',
        data() {
            return {
                companyName: '',
                addressSlots: [{
                    flex: 1,
                    defaultIndex: 1,
                    values: Object.keys(s),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot3',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot5',
                    textAlign: 'center'
                }],
                streetSlots: [{
                    flex: 1,
                    values: [],
                    className: 'slot1',
                    textAlign: 'center'
                }],
                addressProvince: '省',
                addressCity: '市',
                addressXian: '区',
                addressStreet: '街道',

            }
        },
        methods: {

            onAddressChange(picker, values) {

                if (!values[0]) {
                    return
                }
                let sheng = Object.keys(s);
                let shi = Object.keys(s[values[0]]);

                let index = shi.indexOf(values[1]);
                let xian = s[values[0]][shi[index]];

                this.xianObj = xian;
                picker.setSlotValues(1, shi);
                this.addressProvince = values[0];
                this.addressCity = values[1];
                this.addressXian = values[2];
                if (!xian) {
                    return
                }

                picker.setSlotValues(2, Object.keys(xian));
            },
            onStreetChange(picker, values) {
                this.addressStreet = values[0]
            },


        },
        watch: {
            'addressXian': {
                handler(val, oval) {
                    // console.log(this.addressXian)
                    if (!this.addressXian) {
                        return
                    }
                    let street = this.xianObj[this.addressXian]
                        // console.log(street)
                    this.streetSlots[0].values = street
                }
            }
        },
        created() {

        },
        mounted() {
            console.log('mounted')
            this.$nextTick(() => {
                setTimeout(() => { //这个是一个初始化默认值的一个技巧
                    this.addressSlots[0].defaultIndex = 0;
                }, 100);
            });



        }
    }
</script>
<style lang="css" scoped>

</style>